<template>
    <div class="content">
        <!-- 间距 -->
        <n-space vertical>
            <!-- 状态卡片 -->
            <n-card style="border-radius: 5px;">
                <!-- 标题 -->
                <n-h4 prefix="bar">
                    <n-text type="primary">
                        运行情况
                        <div>系统运行时间：{{ SystemInfo.uptime }}</div>
                    </n-text>
                </n-h4>
                <!-- 内容 -->
                <div class="content-status">
                    <div class="fcc">
                        <n-progress :status="progressStatusIf(SystemInfo.cpuUsage)" type="circle"
                            :percentage="SystemInfo.cpuUsage">
                            <span class="perFont">{{ SystemInfo.cpuUsage }}%<br /><span class="f10">{{ SystemInfo.cpuCores
                            }}线程</span> </span>
                        </n-progress>
                        <span class="title">{{ SystemInfo.platform }} </span>
                    </div>

                    <div class="fcc">
                        <n-progress :status="progressStatusIf(SystemInfo.memoryUsage)" type="circle"
                            :percentage="SystemInfo.memoryUsage">
                            <span class="perFont">{{ SystemInfo.memoryUsage }}%<br /> <span class="f10">内存使用</span> </span>
                        </n-progress>
                        <span class="title">{{ SystemInfo.usedMemory }}/{{ SystemInfo.totalMemory }}</span>
                    </div>

                </div>
            </n-card>

            <!-- 其它 -->
            <n-card style="border-radius: 5px;">
                <!-- 标题 -->
                <n-h4 prefix="bar">
                    <n-text type="primary">
                        最新资讯
                    </n-text>
                </n-h4>
                <!-- 内容 列表-->
                <n-space vertical>
                    <n-thing v-for="index in 1" :key="index" class="thingBottom">
                        <template #avatar>
                            <n-avatar>
                                <i class="iconfont icon-jihuarenwu"></i>
                            </n-avatar>
                        </template>
                        <template #header>
                            测试版发布
                        </template>
                        <template #header-extra>
                            <n-button circle size="small">
                                <template #icon>
                                    <i class="iconfont icon-jihuarenwu"></i>
                                </template>
                            </n-button>
                        </template>
                        <template #description>
                            一款支持多服务器|多控制台类型的|启动器
                        </template>
                        如果你是一名热衷于我的世界游戏的玩家，并且经常切换不同的游戏服务器或使用不同的控制台类型，那么这款启动器将成为你的好帮手。这款启动器是一个功能强大、灵活性高的工具，旨在为玩家提供便捷的游戏体验。

                        首先，这款启动器支持多服务器，你可以轻松地切换不同的游戏服务器。它提供了一个直观的界面，让你可以快速浏览和选择你喜欢的服务器。不论你是喜欢经典的生存模式，还是更愿意挑战刺激的 PvP
                        模式，只需几步操作，即可连接到你心仪的服务器
                        <template #action>
                            <n-space>
                                <n-button size="small">
                                    <template #icon>
                                        <n-icon>
                                            <i class="iconfont icon-renwuxiangqing"></i>
                                        </n-icon>
                                    </template>
                                    支持
                                </n-button>
                                <n-button size="small">
                                    <template #icon>
                                        <n-icon>
                                            <i class="iconfont icon-baimingdan"></i>
                                        </n-icon>
                                    </template>
                                    评论
                                </n-button>
                                <n-button size="small">
                                    <template #icon>
                                        <n-icon>
                                            <i class="iconfont icon-jihuarenwu"></i>
                                        </n-icon>
                                    </template>
                                    收藏
                                </n-button>
                            </n-space>
                        </template>
                    </n-thing>
                </n-space>

            </n-card>

        </n-space>
    </div>
</template>
  
  
<script setup>
import { ref, reactive, onActivated, onDeactivated } from "vue";
import { useMainStore, useToolStore } from "@renderer/store/index";
import { useRouter } from 'vue-router';
import { getAppv } from '@renderer/assets/common/api';
import { useDialog } from "naive-ui";

const dialog = useDialog();
let { ipcRenderer } = window.electron;
const toolStore = useToolStore();
const progressStatus = {
    '0': 'success',
    '60': 'warning',
    '85': 'error'
};

const SystemInfo = reactive({
    platform: '',
    cpuCores: '',
    cpuUsage: "0.00",
    memoryUsage: "0.00",
    totalMemory: "0.00 GB",
    uptime: "0 天 0 小时 0 分钟 0 秒",
    usedMemory: "0.00 GB"
});//cpu和内存信息

//监测新版本
getAppv().then(res => {
    if (!res) return;
    if (res.appMark > toolStore.appMark) {
        // 新版本
        dialog.warning({
            title: "更新提示",
            content: res.content,
            positiveText: "更新",
            negativeText: "取消",
            onPositiveClick: () => {
                window.api.openUrl(res.url);
            }
        });
    }
});

let setIntervalID = null;

function formatUptime(uptime) {
    const seconds = Math.floor(uptime % 60);
    const minutes = Math.floor((uptime / 60) % 60);
    const hours = Math.floor((uptime / 60 / 60) % 24);
    const days = Math.floor(uptime / 60 / 60 / 24);
    return `${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`;
}

function getCpuInfo(status) {
    /**
        * 获取cpu和内存信息
        */
    ipcRenderer.invoke('getSystemInfo', status).then(res => {
        res.uptime = formatUptime(res.uptime);
        Object.assign(SystemInfo, res);
    });
}

let countCpuInfo = 0;

onActivated(() => {
    getCpuInfo(true);
    setIntervalID = setInterval(() => {
        let status = false;
        if (countCpuInfo >= 2) {
            countCpuInfo = 0
            status = true;
        }
        getCpuInfo(status);
        countCpuInfo++;
    }, 1000);
});

onDeactivated(() => {
    if (setIntervalID) clearInterval(setIntervalID);
});

/**
 * 根据进度值设置不同状态和颜色
 * @param {Number} percentage 
 */
function progressStatusIf(percentage) {
    let status = '';
    for (let key in progressStatus) {
        if (percentage > Number(key)) {
            status = progressStatus[key];
        }
    }
    return status;
}


</script>
  
  
<style lang="scss" scoped>
.content {
    display: flex;
    flex-direction: column;

    // 状态内容
    .content-status {
        display: flex;
        justify-content: space-around;

        // 布局
        .fcc {
            display: flex;
            flex-direction: column;
            align-items: center;

            .title {
                margin-top: 10px;
            }

            .perFont {
                text-align: center;
            }

            .f10 {
                font-size: 10px;
            }
        }
    }
}
</style>